<gm:page title="Sample - Calendar" authenticate="false">

  <!--
    The calendar application demonstrates calendar feed to select items
    from the user's calendar and view the details of that entry.     
    @author: GME Team
  -->
  
  <div class="gm-app-header">
    <h1>Calendar</h1>
    Dates that have events are underlined on the calendar. Click the date to see the events for that day.
  </div>

  <gm:data id="myData" data="http://www.google.com/calendar/feeds/2odmstb4hh1qcmg4ml8pj1uoo4%40group.calendar.google.com/public/full?orderby=starttime&sortorder=ascending"/>

  <table class="gm-padded" style="width:100%">
    <tr valign="top">
      <td style="width:250px">
        <gm:calendar id="myCalendar" data="${myList}">
          <gm:handleEvent src="myList" event="select"/>
        </gm:calendar>
      </td>
      <td>
        <gm:item id="myItem" template="myItemTemplate">
          <gm:handleEvent event="select" src="myCalendar"/>
          <gm:handleEvent event="select" src="myList"/>
        </gm:item>
      </td>
    </tr>
    <tr>
      <td>
        <gm:list id="myList" data="${myData}" pagesize="5"
            template="myListTemplate">
          <gm:handleEvent event="select" src="myCalendar"/>
        </gm:list>
      </td>
    </tr>
  </table>

  <gm:template id="myListTemplate">
    <table class="blue-theme" style="width:220px">
      <tr repeat="true">
        <td style="width:50px"><b><gm:date ref="gd:when/@startTime"></b></td>
        <td><gm:html ref="atom:title"/></td>
      </tr>
      <tfoot>
        <tr>
          <td colspan="2" align="center"><gm:pager compact="true"/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>

  <gm:template id="myItemTemplate">
    <table>
      <tr>
        <td style="font-size:18px">
          <gm:text ref="atom:title"/><br/>
          <i><gm:text ref="gd:where/@valueString"/></i><br/>
          <b><gm:date ref="gd:when/@startTime"/></b>
        </td>
      </tr>
    </table>
  </gm:template>

</gm:page>
